<template>
	<div class="demo1">
		<div ref="el">
			<div class="wx_draglist" v-for="item in list" :key="item.id">
				{{ item.name }}
			</div>
		</div>
		<pre class="wx_pre" style="background: #ddd;">{{JSON.stringify(list,null,2) }}</pre>
	</div>

	<div class="demo2">
		<div class="container" ref="container">
			<div class="item" data-swapy-slot="div1">
				<div class="content-a" data-swapy-item="a">
					div1
				</div>
			</div>

			<div class="item" data-swapy-slot="div2">
				<div class="content-b" data-swapy-item="b">
					div2
				</div>
			</div>

			<div class="item" data-swapy-slot="div3">
				<div class="content-c" data-swapy-item="c">
					div3
				</div>
			</div>
			<div class="item" data-swapy-slot="div4">
				<div class="content-d" data-swapy-item="d">
					div4
				</div>
			</div>
			<div class="item" data-swapy-slot="div5">
				<div class="content-e" data-swapy-item="e">
					div5
				</div>
			</div>
			<div class="item" data-swapy-slot="div6">
				<div class="content-f" data-swapy-item="f">
					div6
				</div>
			</div>
			<div class="item" data-swapy-slot="div7">
				<div class="content-g" data-swapy-item="g">
					div7
				</div>
			</div>
			<div class="item" data-swapy-slot="div8">
				<div class="content-h" data-swapy-item="h">
					div8
				</div>
			</div>
		</div>
		<pre class="wx_pre" style="background: #ddd;">{{JSON.stringify(list2,null,2) }}</pre>
	</div>

</template>

<script setup lang="ts">
	// demo1官方文档： https://vue-draggable-plus.pages.dev/
	// demo2官方文档： https://swapy.tahazsh.com/
	import { onMounted, ref } from 'vue'
	import { useDraggable } from 'vue-draggable-plus'
	import { createSwapy } from 'swapy'
	
	
	const el = ref()
	const list = ref([
		{
			name: '张三',
			id: 1
		},
		{
			name: '李四',
			id: 2
		},
		{
			name: '王五',
			id: 3
		},
		{
			name: '赵六',
			id: 4
		}, {
			name: '钱铒',
			id: 5
		},
		{
			name: '孙䉈',
			id: 6
		},
		{
			name: '李斯',
			id: 7
		}
	])
	// 返回值是一个对象，包含了一些方法，比如 start、destroy、pause 等
	const { start } = useDraggable(el, list, {
		animation: 150,
		onClone() {
			console.log('clone', list)
		},
		onStart() {
			console.log('start', list)
		},
		onUpdate() {
			console.log('update', list)
		}
	})
	console.log(start)
	
	
	const container = ref<HTMLDivElement | null>(null)
	let list2 = ref({})
	onMounted(() => {
		if (container.value) {
			const swapy = createSwapy(container.value, {
				animation: 'dynamic'
			})
			swapy.enable(true)
			swapy.onSwap((event) => {
				list2.value = event.data.object
			})
		}
	})


	
</script>
<style>
	.wx_draglist {
		background: #ddd;
		width: 200px;
		padding: 10px;
		margin: 10px;
		cursor: pointer;
	}

	.wx_pre {
		background: #ddd;
		width: 200px;
		padding: 20px;
		margin: 10px;
	}

	.demo1 {
		display: flex;
	}

	.content-a {
		grid-column-start: 1;
		grid-column-end: 2;
		background: #1f306e;
		height: 100%;
	}

	.content-b {
		background: #553772;
		height: 100%;
	}

	.content-c {
		background: #8f3b76;
		height: 100%;
	}

	.content-d {
		background: #c7417b;
		height: 100%;
	}

	.content-e {
		background: #f5487f;
		height: 100%;
	}

	.content-f {
		background: #F5C331;
		height: 100%;
	}

	.content-g {
		background: #06B096;
		height: 100%;
	}

	.content-h {
		background: #68d;
		height: 100%;
	}

	.container {
		margin: 60px;
		display: grid;/* 声明一个容器 */
		grid-template-columns: repeat(3, 300px);/*  声明列的宽度  */
		grid-gap: 20px;/*  声明行间距和列间距  */
		grid-template-rows: 100px 200px;/*  声明行的高度  */
	}

	.item {
		color: #fff;
		text-align: center;
		line-height: 200%;
		font-size: 200%;
		background: rgba(0, 0, 0, 0.12);
	}
</style>